 <!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">

    <script src="http://172.16.17.100:8081/jquery-3.3.1.min.js"></script>
    <!-- Echart -->
    <script type="text/javascript" src="http://172.16.17.100:8081/echarts.min.js" charset="utf-8"></script>

    <title>测试</title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #chart {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

</head>

<body>
    <div id="chart"></div>



<script type="text/javascript">

var getDataURL = '/get_chart/{{page}}/'
 $.ajax({
        url: getDataURL,
        useDefaultXhrHeader: false, //important, otherwise its not working
        type: "GET",
        dataType: 'text',
        success: function(response, opts) {
            var myChart = echarts.init(document.getElementById("chart"))
            res = JSON.parse(response)
            var title = res['title']

            var maxValue = 800
            var ShowNumber = 7   //4 year, 7 year-month, 11 - all
            var feq = 500

            if (res['paramets']['maxValue'] != undefined){
                maxValue = res['paramets']['maxValue']
            }
            if (res['paramets']['ShowNumber'] != undefined){
                ShowNumber = res['paramets']['ShowNumber']
            }
            if (res['paramets']['feq'] != undefined){
                feq = res['paramets']['feq']
            }

            var rawData = res['datas']

            function topN(N) {
                var data = [];
                for (var i = 0; i < rawData.length; i++){
                    data[i] = {};
                    data[i].date = rawData[i].date;
                    data[i].data = rawData[i].data.slice(0, N);
                }
                return data;
            }

            var data = topN(10);


            var colorListMapping = res['color_list']


            var colorListS = [];
            var colorListS1 = [];
            for (var i = 0; i < data.length; i++) {
                var colorListF = [];
                var colorListF1 = {};
                for (var n = 0; n < data[i].data.length; n++) {
                    colorListF.push(colorListMapping[data[i].data[n].name]);
                    colorListF1[data[i].data[n].name] = colorListMapping[data[i].data[n].name];
                }
                colorListS[i] = colorListF
                colorListS1[i] = colorListF1;

            }

            var option = {
                baseOption: {
                    animationDurationUpdate: 100,
                    animationEasingUpdate: 'quinticInOut',
                    label: {
                        fontSize: 25,
                        fontFamily: 'impact'
                    },
                    timeline: {
                        show: false,
                        axisType: 'category',
                        autoPlay: true,
                        playInterval: feq,

                        label: {
                            normal: {
                                formatter: ""
                            }
                        },

                        data: data.map(function(ele) {
                            return ele.date
                        })
                    },
                     title: [{
                        textAlign: 'center',
                        left: '75%',
                        top: '75%',
                        textStyle: {
                            fontSize: 40,
                            color: 'silver',
                            fontWeight: 'bold',
                            fontFamily: 'impact',
                        }
                    }, {
                        text: title,
                        left: 'center',
                        top: 30,
                        textStyle: {
                            color: 'black',
                            fontFamily: 'impact',
                            fontSize: 40
                        }
                    }],

                    grid: {
                        top: '12%',
                        right: '20%',
                        top: '12%',
                        height: 'auto',
                        bottom: '5%',
                    },
                    xAxis: {
                        type: 'value',
                        max: maxValue,
                    },
                    yAxis: {},
                    series: [
                        {
                            id: 'bar',
                            type: 'bar',
                            barWidth: '12',
                            tooltip: {
                                show: false
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                }
                            },
                            data: []
                        },
                    ]
                },
                options: []
            }

            for (var i = 0; i < data.length; i++) {

                var xMax = 20;
                if (data[i].data[0].value > 20) {
                    xMax = 'dataMax'
                }
                option.options.push({
                    title: {
                        text: data[i].date.substring(0, ShowNumber)
                    },
                    yAxis: {
                        type: 'category',
                        // axisTick: {
                        //     show: false
                        // },
                        axisLabel: {
                            fontSize: 20,
                            fontWeight: 'bold'
                        },

                        data: data[i].data.map(function(ele) {
                            return ele.name
                        }).reverse()
                    },
                    series: [
                        {
                            id: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = colorListS1[i-1]
                                        return colorList[params.name]
                                    },
                                    label: {
                                        show: true,
                                        position: 'top',
                                        formatter: '{c}%'
                                    }
                                }
                            },
                            label: {
                                normal: {
                                    position: 'right',
                                    formatter: '{c}',
                                    //color: '#000000'
                                }
                            },
                            data: data[i].data.map(function(ele) {
                                return ele.value
                            }).sort(function(a, b) {
                                return a > b
                            })
                        },
                    ]
                })
            }
            myChart.setOption(option);
        }



  })

</script>

</body>